<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
        <title>document</title>
        <style>
            div{
                height: 100px;
            }
            .h{
                background: yellowgreen;
            }
            .b{
                background: hotpink;
            }
            .f{
                background: yellow;
            }

            
        </style>
    </head>
    <body>
        <div class="h">我是头部</div>
        <div id="content" class="b"></div>
        <div class="f">我是底部</div>
        <script>
            // 监视锚点值的改变
            window.addEventListener('hashchange',function(){
                var text = '';
                switch(location.hash){
                    case '#/zujian':
                        text = '组件传值';
                    case "#/dom":
                        text = 'DOM元素的操作';
                        break;    
                }
                document.getElementById('content').innerHTML = text;
            })
        </script>
    </body>
</html>